<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-color: #006266;
      color: #fff;
      font-family: Helvetica;
    }
    .main{
      margin: 200px auto;
      width: 650px;
      height: 300px;
      /* background-color: blanchedalmond; */
      display: grid;
      grid-template-rows:100px 100px 100px ;
      grid-template-columns: 500px 150px;
      /* 间距 */
      gap: 5px;
      overflow: hidden;
      text-align: center;
      line-height: 100px;
    }
    input{
      display: none;
    }
    .tab{
      /* 内容占第一行到第四行 */
      grid-row: 1/4;
      /* 内容占第一列到第二列 */
      grid-column: 1/2;
      background-color: #12CBC4;
      transition: 1s;
    }
    .tab_s{
      width: 500px;
      height: 300px;
      line-height: 300px;
      font-size: 5em;
    }
    .tab_s:first-child{
      background-color: #FDA7DF;
    }
    .tab_s:nth-child(2){
      background-color: #5758bb;
    }
    .tab_s:nth-child(3){
      background-color: #bb5757;
    }
    #l1{
      grid-column: 2/3;
      grid-row: 1/2;
      background-color: #FDA7DF;
    }
    #l2{
      grid-column: 2/3;
      grid-row: 2/3;
      background-color: #5758bb;
    }
    #l3{
      grid-column: 2/3;
      grid-row: 3/4;
      background-color: #bb5757;
    }
    #b1:checked ~ .tab{
      transform: translateY(0px);
    }
    #b2:checked ~ .tab{
      transform: translateY(-300px);
    }
    #b3:checked ~ .tab{
      transform: translateY(-600px);
    }
    #l1:hover,
    #l2:hover,
    #l3:hover{
      cursor: pointer;
      background-color: rgba(227, 165, 165, 0.5);
    }
  </style>
</head>
<body>
  <div class="main">
    <input type="radio" name="button" id="b1">
    <input type="radio" name="button" id="b2">
    <input type="radio" name="button" id="b3">
    <label for="b1" id="l1">AA</label>
    <label for="b2" id="l2">BB</label>
    <label for="b3" id="l3">CC</label>
    <div class="tab">
      <div class="tab_s">contentAA</div>
      <div class="tab_s">contentBB</div>
      <div class="tab_s">contentCC</div>
    </div>
  </div>
</body>
</html>